<template>
	<view>
		<editor :id="editorId" class="editorCom" :placeholder="placeholder" :read-only="isreadOnly"
			@ready="onEditorReady" @input="getContent"></editor>
	</view>
</template>

<script>
	export default {
		props: {
			noteId: {
				type: [String],
				default: ""
			},
			textContent: {
				type: [String],
				default: ""
			},
			isreadOnly: {
				type: [Boolean],
				default: true
			},
		},
		data() {
			return {
				placeholder: '开始输入...',
			}
		},
		computed: {
			editorId() {
				return "editor" + this.noteId // 注意 id 要唯一！！
			}
		},
		methods: {
			onEditorReady() {
				const that = this
				var htmls = this.textContent
				let contents = JSON.stringify(htmls)
				// #ifdef MP-BAIDU
				this.editorCtx = requireDynamicLib('editorLib').createEditorContext('editorId');
				// #endif
				// #ifdef APP-PLUS || H5 ||MP-WEIXIN
				uni.createSelectorQuery().select(`#${this.editorId}`).context((res) => {
					// console.log(res);
					that.editorCtx = res.context
					that.editorCtx.setContents({
						html: htmls,
						delta: contents
					})
				}).exec()
				// #endif
			},

			getContent() {
				const that = this
				that.editorCtx.getContents({
					success: function(res) {
						console.log(res.text)
						var para = {
							id: that.noteId,
							noteContent: res.text
						}
						that.$emit('editorInput', res.text)

					},
					fail: function(error) {
						console.log(error)
					}
				})
			}
		}
	}
</script>

<style>
	.editorCom {
		width: 100%;
		height: 100rpx;
		background-color: #CCCCCC;
	}
</style>
